<extend name="_Layout/main"/>

<block name="style">

</block>

<block name="main">
	<section>
		<section class="vbox">
			<section id="vbox" class="scrollable wrapper-lg">
					<!-- gallery 画廊引入 Start -->
					<link rel='stylesheet' href='Application/Home/View/Music/_Resource/gallery/css/style.css' type='text/css' media='screen' />
					<link rel="stylesheet" href="Application/Home/View/Music/_Resource/gallery/css/baguetteBox.min.css" type='text/css' media='screen' />
					<!-- gallery 画廊引入 End -->

					<!-- 文档列表页面顶部钩子 -->
					<div class="clearfix hook hook-document-list-before">
						{:hook('DocumentListBefore')}
					</div>
							<!-- 文档列表 -->
					<div class="widget widget_gallery_post_widget">
						<header class="list-page-header">
							<a href="{:U('Document/add', array('cid' => $__CURRENT_CATEGORY__))}">
								<h2 class="font-thin m-b m-t-none" style="float:left;">What's Photos</h2>
								<h1 class="list-page-title">发布图片</h1>
							</a>
						</header>
						<div id="container">
							<div id="wrapper" class="baguetteBox">
								<div id="containers">
									<volist name="volist" id="vo">
										<php>$covers_list=explode(',',$vo['covers']);</php>
										<volist name="covers_list" id="imgid">
											<div class="grid">
											  <a href="{$imgid|get_cover='Music'}"><img class="lazy" src="Application/Home/View/Music/_Resource/gallery/css/pixel.gif" data-original="{$imgid|get_cover='Music'}" width="250" /></a>
											</div>
										</volist>
									</volist>
								</div>
							</div>
						</div>
						<script>
							$.getScript("__JS__/galleryjs/jquery.lazyload.min.js",function(){
								$.getScript("__JS__/galleryjs/blocksit.min.js",function(){
									$.getScript("__JS__/galleryjs/baguetteBox.min.js",function(){
										$(function(){
												baguetteBox.run('.baguetteBox');
										});
										//判断显示器大小
										var currentWidth = 1900;
										var col;	//显示列数
										var winWidth = $(window).width();
										var conWidth;
										if(winWidth < 660) {
											conWidth = 660;
											col = 2;
										} else if(winWidth < 880) {
											conWidth = 660;
											col = 3;
										} else if(winWidth < 1100) {
											conWidth = 880;
											col = 4;
										} else if(winWidth < 1500) {
											conWidth = 1200;
											col = 5;
										} else {
											conWidth = 1900;
											col = 6;
										}
										//初始值
										$(function(){
											$("img.lazy").lazyload({
												load:function(){
													$('#containers').BlocksIt({
														numOfCol: col,
														offsetX: 8,
														offsetY: 8
													});
												}
											});
											$('#vbox').scroll(function(){
													// 当滚动到最底部以上50像素时， 加载新内容
												if ($(document).height() - $(this).scrollTop() - $(this).height()<50){
													$('#containers').append($("#test").html());
													$('#containers').BlocksIt({
														numOfCol:col,
														offsetX: 8,
														offsetY: 8
													});
													$("img.lazy").lazyload();
												}
											});

											//window resize
											var currentWidth = 1100;
											$(window).resize(function() {
												var winWidth = $(window).width();
												var conWidth;
												if(winWidth < 660) {
													conWidth = 440;
													col = 2;
												} else if(winWidth < 880) {
													conWidth = 660;
													col = 3;
												} else if(winWidth < 1100) {
													conWidth = 880;
													col = 4;
												} else if(winWidth < 1500) {
													conWidth = 1200;
													col = 5;
												} else {
													conWidth = 1900;
													col = 6;
												}

												if(conWidth != currentWidth) {
													currentWidth = conWidth;
													$('#containers').width(conWidth);
													$('#containers').BlocksIt({
														numOfCol: col,
														offsetX: 8,
														offsetY: 8
													});
												}
											});
										});
									});
								});
							});
						</script>
					</div>
					<ul class="pagination">{$page}</ul>

					<!-- 文档列表页面底部钩子 -->
					<div class="clearfix hook hook-document-list-after">
						{:hook('DocumentListAfter')}
					</div>
			</section>
		</section>
	</section>
</block>
